<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="status-bar"></view>
			<view class="nav-bar">
				<view class="back-btn" @click="backPage()">
					<view class="back-icon"></view>
				</view>
				<view class="title">订单管理</view>
			</view>
		</view>
		
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input">
			<input v-model="searchKey" placeholder="请输入订单编号" @confirm="searchKey=searchKey.trim()"/>
				<text class="search-icon"></text>
			</view>
		</view>
		
		<!-- 状态栏 -->
		<view class="status-bar-info">
			<view class="total-count">共{{filteredOrdersList.length}}条</view>
			<view class="filter" @click="showStatusFilter">
				<text>{{selectedStatus===0 ? '待服务' :'已完成'}}</text>
				<image style="width:20px;height: 30px;" src="/static/down.png"></image>
			</view>
		</view>
		
		<!-- 订单列表 -->
		<view class="order-list">
			<view class="order-item" v-for="item in filteredOrdersList" :key="item.id">
				<view class="order-header">
					<view class="order-number">订单号: {{item.orderNum}}</view>
					<view class="order-price">￥{{item.orderPrice}}</view>
				</view>
				<view class="order-content">
					<view style="display: flex;">
				<view class="order-info">下单用户: {{getUserName(item.userId)}}</view>
				<image style="width: 20px;height: 20px;margin-left: 30px;margin-top: 2px;" src="/static/phone.png"></image>
				</view>
					<view class="order-info">预约时间: {{item.reservationTime}}</view>
					<view class="order-info">服务项目: {{getServiceName(item.serviceId)}}</view>
					<view class="order-footer">
						<view class="order-time">下单时间: {{item.orderTime}}</view>
						<view class="order-detail-btn" @click="toDetail(item.id)">查看详情</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref, computed} from 'vue'
import { onLoad } from '@dcloudio/uni-app' // 添加生命周期导入
import request from '/utils/request.js'
const ordersList=ref([]);
const userList=ref([]);
const serviceList=ref([]);
const searchKey=ref('');//新增搜索关键字
const selectedStatus=ref(0);
	function toDetail(id){
		uni.navigateTo({
			url:'/pages/index/dingdanguanli/dingdanxiangqing/dingdanxiangqing?id='+id
		})
	}
	//订单接口
	function getOrders(){
		request({
			url:'/offer/orders/list',
			method:'GET',
			params:{
				pageNum:1,
				pageSize:10,
			},
			header:{
				Authorization:uni.getStorageSync('token')	
			},
			success:(res)=>{
				if(res.data.code===200){
					ordersList.value=res.data.rows;
					uni.showToast({
						title:'加载成功',
						icon:'success',
					});
					console.log("请求结果",ordersList.value);
					console.log("获取条数:",ordersList.value.length)
					console.log("获取状态:",selectedStatus.value,"获取数据:",res.data.rows)
				}
			},
			fail:(err)=>{
				console.error("请求失败",err);
				uni.showToast({
					title:'加载失败',
					icon:'none',	
				})
			}
		})
	}
	//用户接口
	function getUsers(){
		request({
			url:'/bigbase/info/list',
			method:'GET',
			params:{
				pageNum:1,
				pageSize:10,
			},
			success:(res)=>{
				if(res.data.code===200){
					userList.value=res.data.rows;
					uni.showToast({
						title:'加载成功',
						icon:'success',
					});
					console.log("请求结果",userList.value);
				}
			},
			fail:(err)=>{
				console.error("请求失败",err);
				uni.showToast({
					title:'加载失败',
					icon:'none',	
				})
			}
		})
	}
	//获取服务项目
	function getService(){
		request({
			url:'/evaluate/details/list',
			methods:'GET',
			params:{
				pageSize:10,
				pageNum:1,
			},
			header:{
				Authorization:uni.getStorageSync('token')	
			},
			success:(res)=>{
				if(res.data.code===200){
					serviceList.value=res.data.rows;
					uni.showToast({
						title:"加载成功",
						icon:'success',
					});
					console.log("请求结果",serviceList.value);
				}
			}
		})
	}
	//获取服务项目
	const getServiceName=(serviceId)=>{
		const service=serviceList.value.find(ser=>ser.id===serviceId);
		return service?.serviceName || serviceId;
	}
	//获取用户名称
	const getUserName=(userId)=>{
		const user=userList.value.find(u=>u.id===userId);
		return user?.nickName || userId;
	}
	const filteredOrdersList=computed(()=>{
		return ordersList.value.filter(item=>
		item.orderStatus===selectedStatus.value &&
			item.orderNum?.toString().includes(searchKey.value)
		)
	})
	//状态筛选方法
	const showStatusFilter=()=>{
		uni.showActionSheet({
			itemList:['待服务','已完成'],
			success:(res)=>{
				selectedStatus.value=res.tapIndex ===0?0:5;
				console.log("状态过滤后的方法",selectedStatus.value)
			}
		})
	}
	function backPage(){
		uni.navigateBack()
	}

getOrders();
getUsers();
getService();
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.header {
		background: #1989fa;
		color: #fff;
		position: relative;
		padding-bottom: 10px;
	}
	.search-input input {
  flex: 1;
  font-size: 14px;
  color: #333;
  outline: none;
}
	.status-bar {
		height: var(--status-bar-height);
	}
	
	.nav-bar {
		height: 44px;
		display: flex;
		align-items: center;
		padding: 0 15px;
		position: relative;
	}
	
	.back-btn{
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 0;
		z-index: 1;
	}
	
	.back-icon {
		width: 20px;
		height: 20px;
		position: relative;
	}
	
	.back-icon::before {
		content: "";
		position: absolute;
		width: 12px;
		height: 2px;
		background-color: #fff;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	
	.back-icon::after {
		content: "";
		position: absolute;
		width: 6px;
		height: 6px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		top: 50%;
		left: 0;
		margin-top: -4px;
	}
	
	.title {
		flex: 1;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
	}
	
	.search-box {
		padding: 0 15px 15px;
		background-color: #1989fa;
	}
	
	.search-input {
		background-color: #fff;
		height: 36px;
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		color: #999;
		font-size: 14px;
	}
	
	.search-icon {
		color: #1989fa;
		font-size: 16px;
	}
	
	.status-bar-info {
		display: flex;
		justify-content: space-between;
		padding: 15px;
		color: #666;
		font-size: 14px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.filter {
		display: flex;
		align-items: center;
	}
	
	.down-arrow {
		margin-left: 5px;
		font-size: 12px;
	}
	
	.order-list {
		padding: 10px 15px;
	}
	
	.order-item {
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 15px;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}
	
	.order-header {
		display: flex;
		justify-content: space-between;
		padding: 15px;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.order-number {
		font-size: 14px;
		color: #333;
	}
	
	.order-price {
		color: #ff5722;
		font-size: 16px;
		font-weight: bold;
	}
	
	.order-content {
		padding: 15px;
	}
	
	.order-info {
		line-height: 25px;
		color: #666;
		font-size: 14px;
	}
	
	.order-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
		align-items: center;
		padding-top: 10px;
		border-top: 1px dashed #eee;
	}
	
	.order-time {
		color: #999;
		font-size: 25rpx;
	}
	
	.order-detail-btn {
		background-color: #1989fa;
		color: #fff;
		padding: 5px 20px;
		border-radius: 10px;
		font-size: 14px;
	}
</style>